import React from 'react'
import './StepList.css'

interface StepListProps {
  data: { label: string }[]
  stepValue: number
}

const StepList: React.FC<StepListProps> = ({ data, stepValue }) => {
  return (
    <div className="step-list-container">
      <div>
        <span style={{ color: '#1492ff' }}>{stepValue}</span>
        {`/${data.length}`}
        <span style={{ marginLeft: '5px' }}>{data[stepValue - 1]?.label}</span>
      </div>
      <ul className="step-list">
        {Array.from({ length: data.length }, (_, index) => (
          <li key={index} className={`step-list-item ${stepValue > index + 1 ? 'is-active' : ''} ${stepValue === index + 1 ? 'last-active' : ''}`}>
            <div className="line" />
            <div className="circ" />
          </li>
        ))}
      </ul>
    </div>
  )
}

export default StepList
